import styles from './index.module.scss'
import DeleteChannel from '@c/user/build/build-modal/delete-modal'
import Copy from 'clipboard'
import Button from '@c/button'
import message from '@c/message'
import cm from 'classnames'
import { useEffect, useState } from 'react'
import { deleteImportSource } from '@/api/selfbuild'
import { devicePlatform } from '@/utils/utils'
import { useShowLogin } from '@/utils/hooks'
import { currSelf } from '../store'
import { useSetRecoilState } from 'recoil'
import Null from './null'

const Index = props => {
  const { data, toDetail, updateList } = props
  const setDetail = useSetRecoilState(currSelf)
  const [list, setList] = useState(null)
  const setLogin = useShowLogin()
  const [isDelete, setDelete] = useState(false) //确认删除框
  const [currDelId, setCurrDelId] = useState({}) //当前要删除的自建组
  const [isPhone, setIsPhone] = useState(false) //判断是否是手机端

  //打开删除自建组弹窗
  const openDelModal = (e, id) => {
    e.stopPropagation()
    setCurrDelId(id)
    setDelete(true)
  }
  // 确认删除自建组
  const deleteChannel = async () => {
    const res = await deleteImportSource(currDelId, localStorage.getItem('token'))
    if (res.code === 0) {
      message({ content: '删除成功！' })
      const data = list.filter(item => item.id !== currDelId)
      setList([...data])
      updateList()
    }
    setDelete(false)
  }

  useEffect(() => {
    // 平台
    const { isPC } = devicePlatform()
    setIsPhone(!isPC)
    const copyUrl = new Copy('.self-btn')
    copyUrl.on('success', () => {
      message({ content: '分享信息复制成功，发给朋友一起看吧！' })
    })
  }, [])

  useEffect(() => {
    setList(data)
  }, [data])

  //手机端打开需要编辑的自建组
  const openEditPhone = (e, channel) => {
    e.stopPropagation()
    if (!isPhone) {
      return
    }
  }

  const openEdit = item => {
    setDetail({ ...item })
    toDetail()
  }

  // 已登录dom
  const isLoginNode = (
    <>
      {list && list.length
        ? list.map((item, index) => {
            return (
              <div className={styles.buildItem} key={index}>
                <div className={styles.selfMenu}>
                  <div className={styles.codeBox}>
                    <span>{item.id}</span>
                    <img
                      loading="lazy"
                      src="/images/copy-build.png"
                      alt="复制"
                      data-clipboard-text={`“${item.name}”，拿走不谢！自建码：${item.id}，快去星视界添加自建播放吧 https://www.histar.tv/live`}
                      className={cm(styles.btnComm, styles.btnCopy, 'self-btn')}
                    />
                  </div>
                  <div className="flex">
                    <img
                      loading="lazy"
                      src="/images/self-edit.png"
                      alt="进入详情页"
                      className={cm(styles.btnComm, 'mr-5', styles.btnEdit)}
                      onClick={e => openEdit(item)}
                    />
                    <img
                      loading="lazy"
                      src="/images/delete-build.png"
                      alt="删除"
                      className={cm(styles.btnComm, styles.btnDel)}
                      onClick={e => openDelModal(e, item.id)}
                    />
                  </div>
                </div>
                <p className={cm('textEllipsis', styles.channelName)}>{item.name}</p>
                <p className={styles.channelNum}>{item.source?.length}/100</p>
              </div>
            )
          })
        : null}
      {!list || !list.length ? (
        <Null className={styles.nullBox} content={!list ? '数据加载中...' : '你还未引用/创建自建频道哦～'} />
      ) : null}
    </>
  )

  // 未登录dom
  const notLoginNode = (
    <>
      <div className={styles.notLogin}>
        <span>登录后才能查看或添加自建频道哦～</span>
        <Button hover="opacity" className={styles.btn} onClick={setLogin}>
          立即登录
        </Button>
      </div>
    </>
  )
  return (
    <>
      <div className={styles.itemBox}>{localStorage.getItem('token') ? isLoginNode : notLoginNode}</div>
      {isDelete ? <DeleteChannel onClose={() => setDelete(false)} onConfirm={deleteChannel} /> : null}
    </>
  )
}

export default Index
